<template>
 <div class="input-show" 
  :style="{
    background: ruleFormLocal.borderWrapColor
  }">
    <div class="search-wrap" 
      :style="{
      color: ruleFormLocal.textColor,
    }">
      <div class="inp-wrap" 
        :style="{
          borderRadius: ruleFormLocal.borderInputRadius == 0 ?  ruleFormLocal.borderHeight + 'px' : '0',
          background: ruleFormLocal.borderInputContentColor,
          height: ruleFormLocal.borderHeight + 'px',
          borderColor: ruleFormLocal.borderInputColor,
        }">
        <i class="iconfont iconsearch" style="font-weight: 700;"></i>
        <div 
          class="input"
          :style="{textAlign: ruleFormLocal.textPostion == 0 ? 'center' : 'left'}"
        >搜索</div>
      </div>
    </div>
    <option-right v-if="dateFactory.activeBorder">
      <div class="option-wrap">
        <el-form :model="ruleFormLocal"   label-width="100px">
          <div class="edit-componet-title">
            商品搜索
          </div>
          <el-form-item label="框体样式" prop="borderInputRadius">
            <el-radio-group v-model="ruleFormLocal.borderInputRadius">
              <el-radio :label="0">圆形</el-radio>
              <el-radio :label="1">方形</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="框体高度" prop="borderInputRadius">
            <div class="side">
              <el-slider 
                v-model="ruleFormLocal.borderHeight"
                :min="31"
                :max="40"
              ></el-slider>
              <span>{{ruleFormLocal.borderHeight}}像素</span>
            </div>
          </el-form-item>
          <el-form-item label="背景颜色" prop="borderWrapColor">
            <div class="border-wrap">
              <el-color-picker v-model="ruleFormLocal.borderWrapColor" size="small" ></el-color-picker>
              <el-link type="primary" :underline="false" @click="ruleFormLocal.borderWrapColor == '#fff'">重置</el-link>
            </div>
          </el-form-item>
          <el-form-item label="框体颜色" prop="borderInputContentColor">
            <div class="border-wrap">
              <el-color-picker v-model="ruleFormLocal.borderInputContentColor" size="small" ></el-color-picker>
              <el-link type="primary" :underline="false" @click="ruleFormLocal.borderInputContentColor == '#fff'">重置</el-link>
            </div>
          </el-form-item>
          <el-form-item label="颜色边框" prop="borderInputColor">
            <div class="border-wrap">
              <el-color-picker v-model="ruleFormLocal.borderInputColor" size="small" ></el-color-picker>
              <el-link type="primary" :underline="false" @click="ruleFormLocal.borderInputColor == '#d4d4d4'">重置</el-link>
            </div>
          </el-form-item>
          <el-form-item label="文本位置" prop="textPostion">
            <el-radio-group v-model="ruleFormLocal.textPostion">
              <el-radio :label="0">居中</el-radio>
              <el-radio :label="1">局左</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="文本颜色" prop="textColor">
            <div class="border-wrap">
              <el-color-picker v-model="ruleFormLocal.textColor" size="small" ></el-color-picker>
              <el-link type="primary" :underline="false" @click="ruleFormLocal.textColor == '#bababa'">重置</el-link>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </option-right>
  </div>
</template>

<script>
export default {
  name: 'SearchInput',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  data() {
    return {
      borderHeight: 34,
      ruleFormLocal:this.dateFactory.ruleForm,
    }
  },
  watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        this.diyData[this.index].ruleForm = newValue
         if (this.ruleFormLocal.page == 'AboutWe') {
           this.$EventBus.$emit('diyFactoryAboutMe', this.diyData)
        } else if (this.ruleFormLocal.page == 'CurriculumSchedule') {
            this.$EventBus.$emit('diyFactoryCurriShe', this.diyData)
        } else if (this.ruleFormLocal.page == 'Home') {
           this.$EventBus.$emit('diyFactory', this.diyData)
        }else if (this.ruleFormLocal.page == 'ArticleDetail') {
           this.$EventBus.$emit('diyFactoryArticleDetail', this.diyData)
        }else if (this.ruleFormLocal.page == 'MyPage') {
           this.$EventBus.$emit('diyFactoryMyPage', this.diyData)
        }

      },
      deep: true,
    }
  },
  computed: {
    
  },
  mounted() {
    
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  .input-show  {
    width: 100%;
		box-sizing: border-box;
    padding: 9px 10px;
    background: #fff;
    .search-wrap {
      display: flex;
			align-items: center;
      justify-content: space-between;
      .inp-wrap {
        display: flex;
        align-items: center;
        flex: 1;
				height: 31px;
				padding: 0 16px;
				box-sizing: border-box;
        background-color: #f4f4f4;
        border-radius: 31px;
        border: 1px solid transparent;
        .search-icon {
					width: 14px;
					height: 14px;
					margin-right: 14px;
        }
        .input {
					flex: 1;
          font-size: 14px;
          padding-left: 8px;
        }
        .voice {
					width: 10px;
					height: 14px;
				}
      }
      .info {
        display: flex;
				flex-direction: column;
				align-items: center;
        justify-content: center;
        margin-left: 10px;
        span {
          font-size: 10px;
				}
				img {
					width: 16px;
					height: 14px;
				}
        
      }
    }
  }
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        .border-wrap {
          display: flex;
          align-items: center;
          .el-color-picker {
            margin-right: 12px;
          }
        }
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
    

  }
</style>